<template>
	<view class="search" :style="{'padding-top':source.margin+'px','padding-bottom':source.margin+'px'}">
		<view class="search-cont" :style="{'background-color':source.BackgroundColor}"></view>
		<view class="search-1 " v-if="source.style.active=='style_1'">
			<view class="input-view">
				<input confirm-type="search" @confirm="confirm" class="input" type="text" :placeholder="source.placeholder" />
				<uni-icon type="search" size="22" color="#666666"></uni-icon>
			</view>
		</view>
		<view class="search-3" v-if="source.style.active=='style_3'">
			<view class="logo">
				<image :src="source.logo_img.url"></image>
			</view>
			<view class="input-view ">
				<input confirm-type="search" @confirm="confirm" class="input" type="text" :placeholder="source.placeholder" />
				<uni-icon type="search" size="22" color="#666666"></uni-icon>
			</view>
		</view>
		<view class="search-5" v-if="source.style.active=='style_5'">
			<view class="logo">
				<image :src="source.logo_img.url"></image>
			</view>
			<view class="input-view ">
				<input confirm-type="search" @confirm="confirm" class="input" type="text" :placeholder="source.placeholder" />
				<uni-icon type="search" size="22" color="#666666"></uni-icon>
			</view>
			<view class="logo">
				<image :src="source.logo_img.url"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-icon.vue'

	export default {
		components: {
			uniTag,
			uniIcon
		},
		props: {
			source: [Object]
		},
		computed: {
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';
.input-view {
	width: 92%;
	display: flex;
	background-color: @gray;
	height: 30px;
	border-radius: 15px;
	padding: 0 4%;
	flex-wrap:nowrap;
	margin:7px 0;
	line-height:30px;
}

.input-view .uni-icon{
	line-height:30px !important;
}

.input-view .input {
	height:30px;
	line-height:30px;
	width:94%;
	padding: 0 3%;
	background-color: @gray;
}
</style>
